<template>
	<view class="content">
		<view class="tabbar">
			<mytabbar :current-page="0"></mytabbar>
		</view>
		<view class="top">
			<view class="title-wraper">
				<view class="arrowleft" v-show="isSearching" @click="backNoSearching">
					<u-icon name="arrow-leftward" color="#2979ff" size="28"></u-icon>
				</view>
				<view class="title">念旧书-校园闲置书籍跳蚤市场</view>
			</view>
			<view class="search">
				<Search :searchWhat="result" @submit="submittt" @submitt="submitttt"></Search>
				<view class="scan" @click="scan">
					<u-icon name="scan" color="#2979ff" size="34"></u-icon>
				</view>
			</view>
		</view>
		<view class="subsection">
			<u-subsection :list="list" bgColor="#1ecbff" inactiveColor="#fff" mode="button" :current="curNow"
				@change="sectionChange">
			</u-subsection>
		</view>
		<view class="center">
			<scroll-view scroll-y="true" :scroll-top="sccrollTop" @scroll="scroll" @scrolltoupper="reachTop"
				@scrolltolower="reachBottom" class="scroll-Y">
				<view v-if="!isSearching">
					<view class="bookList" v-if="!curNow">
						<view class="book" v-for="(item,index) in bookInfo" :key="item.id"
							@click="goToPage1(item.id,item.userId)">
							<!-- <view class="books"> -->
							<image :wx-if="ImgUrl" class="img1" :src="ImgUrl+item.bookImage" mode="aspectFit">
							</image>
							<view class="bokname">{{item.bookName}}</view>
							<view class="bokprice">￥{{item.price}}</view>
							<view class="per">
								<image :wx-if="ImgUrl" class="img2" :src="ImgUrl+item.avatar" mode="aspectFill">
								</image>
								<view class="username">{{item.username}}</view>
								<view class="merchant" v-if="item.isMerchant">商家</view>
							</view>
							<!-- </view> -->
						</view>
					</view>
					<view class="bookList" v-else>
						<view class="book" v-for="(item,index) in qiuGouBooks" :key="item.id"
							@click="goToPage2(item.id,item.userId,item.avatar,item.username)">
							<!-- <view class="books"> -->
							<image :wx-if="ImgUrl" class="img1" :src="ImgUrl+item.purchaseImage" mode="aspectFit">
							</image>
							<view class="bokname">{{item.purchaseBook.bookName}}</view>
							<view class="bokprice"><span>期望价格</span>￥{{item.expectPrice}}</view>
							<view class="per">
								<image :wx-if="ImgUrl" class="img2" :src="ImgUrl+item.avatar" mode="aspectFill">
								</image>
								<view class="username">{{item.username}}</view>
								<view class="merchant" v-if="item.isMerchant">商家</view>
							</view>
							<!-- </view> -->
						</view>
					</view>
				</view>
				<view v-else>
					<view class="bookList" v-if="!curNow">
						<u-empty :show="!searchResult.length" mode="data"
							icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
						<view class="book" v-for="(item,index) in searchResult" :key="item.id"
							@click="goToPage1(item.id,item.userId)">
							<!-- <view class="books"> -->
							<image :wx-if="ImgUrl" class="img1" :src="ImgUrl+item.bookImage" mode="aspectFit">
							</image>
							<view class="bokname">{{item.bookName}}</view>
							<view class="bokprice">￥{{item.price}}</view>
							<view class="per">
								<image :wx-if="ImgUrl" class="img2" :src="ImgUrl+item.avatar" mode="aspectFill">
								</image>
								<view class="username">{{item.username}}</view>
								<view class="merchant" v-if="item.isMerchant">商家</view>
							</view>
							<!-- </view> -->
						</view>
					</view>
					<view class="bookList" v-else>
						<u-empty :show="!searchQG.length" mode="data"
							icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
						<view class="book" v-for="(item,index) in searchQG" :key="item.id"
							@click="goToPage2(item.id,item.userId,item.avatar,item.username)">
							<!-- <view class="books"> -->
							<image :wx-if="ImgUrl" class="img1" :src="ImgUrl+item.purchaseImage" mode="aspectFit">
							</image>
							<view class="bokname">{{item.purchaseBook.bookName}}</view>
							<view class="bokprice"><span>期望价格</span>￥{{item.expectPrice}}</view>
							<view class="per">
								<image :wx-if="ImgUrl" class="img2" :src="ImgUrl+item.avatar" mode="aspectFill">
								</image>
								<view class="username">{{item.username}}</view>
								<view class="merchant" v-if="item.isMerchant">商家</view>
							</view>
							<!-- </view> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="tab" style="height:40px;width:200px;float:left;"></view>
		<u-back-top @click="backToTop" :scroll-top="scrollTop" top="100" duration="1000"></u-back-top>
	</view>
</template>
<script>
	import Search from '../../components/Search'
	export default {
		data() {
			return {
				btnId: 0,
				bookInfo: [],
				qiuGouBooks: [],
				currentPage: 1,
				currentPage2: 1,
				ImgUrl: '',
				scrollTop: '',
				sccrollTop: '',
				result: '',
				isShowBackTop: false,
				list: ['闲置', '求购'],
				curNow: 0,
				searchResult: [],
				searchQG: [],
				isSearching: false,
				ecount: 0,
			}
		},
		components: {
			Search
		},
		onShow() {

		},
		async onLoad() {
			let ImgUrl = getApp().globalData.ImgUrl
			this.ImgUrl = ImgUrl
			let BaseUrl = getApp().globalData.BaseUrl
			let token = uni.getStorageSync('token');
			await uni.request({
				url: BaseUrl + '/saleBook/indexBook',
				method: "POST",
				header: {
					'Content-Type': 'application/json',
					'token': token
				},
				data: {
					page: this.currentPage,
					limit: '15',
					bookName: '',
					ibsn: '',
					typeid: ''
				},
				success: (res) => {
					// // console.log("init1", res)
					this.currentPage += 1
					this.bookInfo = res.data.data.data
					this.bookInfo.forEach((item, index) => {
						uni.request({
							url: BaseUrl + '/identity/result',
							header: {
								'Content-Type': 'application/json',
								'token': token
							},
							data: {
								userId: item.userId
							},
							success: (ress) => {
								// // console.log("result", ress)
								if (ress.data.data && ress.data.data.status == 1) {
									this.$set(this.bookInfo[index], 'isMerchant', true)
								} else {
									this.$set(this.bookInfo[index], 'isMerchant',
										false)
								}
							}
						})
					})
					// data.forEach((res) => this.bookInfo.push(res))
				}
			})
			await uni.request({
				url: BaseUrl + '/purchase/index',
				method: "POST",
				header: {
					'Content-Type': 'application/json',
					'token': token
				},
				data: {
					page: this.currentPage2,
					limit: '15',
					bookName: '',
					ibsn: '',
				},
				success: (res) => {
					//// console.log("init2", res)
					this.currentPage2 += 1
					this.qiuGouBooks = res.data.data.data
					this.qiuGouBooks.forEach((item, index) => {
						uni.request({
							url: BaseUrl + '/identity/result',
							header: {
								'Content-Type': 'application/json',
								'token': token
							},
							data: {
								userId: item.userId
							},
							success: (ress) => {
								// // console.log("result", ress)
								if (ress.data.data && ress.data.data.status == 1) {
									this.$set(this.qiuGouBooks[index], 'isMerchant',
										true)
								} else {
									this.$set(this.qiuGouBooks[index], 'isMerchant',
										false)
								}
							}
						})
					})
					// data.forEach((res) => this.bookInfo.push(res))
				}
			})
		},
		onShareTimeline() {
			let title = '念旧书-校园闲置书籍跳蚤市场'
			return {
				title: title,
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png'
			}
		},
		onShareAppMessage: function(e) {
			let title = '念旧书-校园闲置书籍跳蚤市场'
			return {
				title: title,
				path: 'pages/index/index',
				imageUrl: '../../static/logo.png'
			}
		},
		onPullDownRefresh() {
			//// console.log('refresh');
			uni.reLaunch({
				url: './index',
			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1500);
		},

		methods: {
			scan() {
				uni.scanCode({
					scanType: ['barCode'],
					success: (res) => {
						this.result = res.result
						console.log('条码内容：' + res.result);
					}
				});
			},
			async isMerchant(userid) {
				let BaseUrl = getApp().globalData.BaseUrl
				let token = uni.getStorageSync('token');
				await uni.request({
					url: BaseUrl + '/identity/result',
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					data: {
						userId: userid
					},
					success: (res) => {
						//// console.log("result", res)
					}
				})

			},
			goToPage1(id, userId) {
				uni.navigateTo({
					url: '/pages/bookDetail/bookDetail?id=' + id + '&userId=' + userId
				})
			},
			goToPage2(id, userId, avatar, username) {
				uni.navigateTo({
					url: '/pages/bookDetail/qiuGouBook?id=' + id + '&userId=' + userId + '&avatar=' + avatar +
						'&username=' + username
				})
			},
			submittt(e) {
				this.searchResult = ''
				if (e.count > 0) {
					this.ecount = e.count
				}
				if (e.count == 0) {
					// uni.showToast({
					// 	title: "搜索无结果",
					// 	icon: "error"
					// })
					return;
				} else {
					this.searchResult = e.data
					this.isSearching = true
				}
			},
			submitttt(e) {
				this.searchQG = ''
				if (e.count > 0) {
					this.ecount = e.count
				}
				if (e.count == 0) {
					// uni.showToast({
					// 	title: "搜索无结果",
					// 	icon: "error"
					// })
					return;
				} else {
					this.searchQG = e.data
					this.isSearching = true
				}
			},
			backNoSearching() {
				this.isSearching = false
				this.result = ''
			},
			async reachBottom() {
				//// console.log('reachBottom');
				let BaseUrl = getApp().globalData.BaseUrl
				let token = uni.getStorageSync('token');
				if (this.curNow == 0) {
					await uni.request({
						url: BaseUrl + '/saleBook/indexBook',
						method: "POST",
						header: {
							'Content-Type': 'application/json',
							'token': token
						},
						data: {
							page: this.currentPage,
							limit: '15',
							bookName: '',
							ibsn: '',
							typeid: ''
						},
						success: (res) => {
							//// console.log("reach", res)
							this.currentPage += 1
							const data = res.data.data.data
							data.forEach((res) => this.bookInfo.push(res))
							this.bookInfo.forEach((item, index) => {
								if (item.isMerchant == undefined) {
									uni.request({
										url: BaseUrl + '/identity/result',
										header: {
											'Content-Type': 'application/json',
											'token': token
										},
										data: {
											userId: item.userId
										},
										success: (ress) => {
											// // console.log("result", ress)
											if (ress.data.data && ress.data.data.status == 1) {
												this.$set(this.bookInfo[index],
													'isMerchant', true)
											} else {
												this.$set(this.bookInfo[index],
													'isMerchant', false)
											}
										}
									})
								}
							})
						}
					})
				} else {
					await uni.request({
						url: BaseUrl + '/purchase/index',
						method: "POST",
						header: {
							'Content-Type': 'application/json',
							'token': token
						},
						data: {
							page: this.currentPage2,
							limit: '15',
							bookName: '',
							ibsn: '',
							typeid: ''
						},
						success: (res) => {
							// // console.log("reach", res)
							this.currentPage2 += 1
							const data = res.data.data.data
							data.forEach((res) => this.qiuGouBooks.push(res))
							if (item.isMerchant == undefined) {
								this.qiuGouBooks.forEach((item, index) => {
									uni.request({
										url: BaseUrl + '/identity/result',
										header: {
											'Content-Type': 'application/json',
											'token': token
										},
										data: {
											userId: item.userId
										},
										success: (ress) => {
											// // console.log("result", ress)
											if (ress.data.data && ress.data.data.status == 1) {
												this.$set(this.qiuGouBooks[index],
													'isMerchant', true)
											} else {
												this.$set(this.qiuGouBooks[index],
													'isMerchant', false)
											}
										}
									})
								})
							}
						}
					})
				}

			},
			scroll(e) {
				if (e.detail.scrollTop > 100 && this.isShowBackTop == false) {
					this.scrollTop = e.detail.scrollTop;
					this.isShowBackTop = true
				}
			},
			backToTop(e) {
				this.scrollTop = 0
				this.sccrollTop = 0
				this.isShowBackTop = false
			},
			reachTop() {
				this.sccrollTop = ''
			},
			sectionChange(index) {
				this.curNow = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		background-color: $color;
		z-index: -1;

		.tabbar {
			z-index: 999;
		}

		.top {
			.title-wraper {
				.arrowleft {
					width: 65upx;
					position: absolute;
					left: 20upx;
					top: -10upx;
				}

				.title {
					color: blue;
					text-align: center;
				}
			}

			.search {
				margin-top: 15upx;
				display: flex;
				justify-content: center;
				align-items: center;

				.scan {
					position: relative;
					left: 10upx;
				}
			}
		}

		.subsection {
			margin-top: 10upx;
		}

		.center {
			margin-top: 10upx;
			border-radius: 10upx;
			height: 100%;
			z-index: -1;
			background-color: #f2f2f2;

			.scroll-Y {
				height: 100%;
			}

			.bookList {
				margin-top: 20upx;
				z-index: 10;

				.book {
					position: relative;
					float: left;
					z-index: 0;
					margin: 0 12upx;
					// box-shadow: 0upx 2upx 3upx #afafaf, 0upx -2upx 3upx #afafaf;
					border-radius: 10upx;
					overflow: hidden;
					margin-bottom: 30upx;
					height: 500upx;
					background-color: #fff;
					width: 350upx;
					overflow: hidden;

					.img1 {
						height: 70%;
						width: 100%;
						border-radius: 10upx;
						// box-shadow: 0px -2px 5px #888;
					}

					.per {
						display: flex;
						align-items: center;
						margin-left: 10upx;
						overflow: hidden;

						.img2 {
							width: 50upx;
							height: 50upx;
							display: block;
							border-radius: 50%;
						}

						.username {
							margin-left: 10upx;
						}

						.merchant {
							background-color: #0f887e;
							color: #fff;
							font-size: 20upx;
							padding: 4upx 10upx;
							border-radius: 8upx;
							position: relative;
							left: 10upx;
							top: 5upx;
						}
					}

					.bokname {
						margin-left: 15upx;
						width: 100%;
						overflow: hidden;
						// background-color: red;
						height: 8%;
					}

					.bokprice {
						margin: 5upx 15upx;
						height: 8%;
					}
				}
			}
		}
	}
</style>
